<template>
    <div>
        <h1>角色授权</h1>
        <el-tree :data="treeData" :props="treeProps" ref="tree" node-key="id" :default-checked-keys="checkedArr"
            show-checkbox @check-change="handleCheckChange">
        </el-tree>
    </div>
</template>

<script>
import { selectMenus, selectRoleOneMenus } from '@/api/systemManager'
import bus from '@/components/common/bus';
export default {
    data() {
        return {
            id: '',
            count: 1,
            treeData: [],
            treeProps: {
                label: 'menusname',
                children: 'children',
                isLeaf: node => !node.children
            },
            checkedArr: [],
        };
    },
    props: ['fatherId'],
    mounted() {
        this.id = this.fatherId
        this.getNavList()
        this.getAuthorization()
    },
    methods: {
        //获取导航栏数据
        async getNavList() {
            let result = await selectMenus()
            if (result.code == 200) {
                this.treeData = result.data
            }
        },
        //获取权限数据
        async getAuthorization() {
            let result = await selectRoleOneMenus({ id: this.id })
            if (result.code === 200) {
                this.checkedArr = Object.values(result.data)
            }
        },
        //树形
        handleCheckChange(data, checked, indeterminate) {
            let arr = []
            this.$refs.tree.getCheckedNodes().forEach(item => {
                arr.push(item.id)
            })
            bus.$emit('checkArr', arr);
        },
    },
    watch: {
        fatherId(val) {
            this.id = val
            this.getAuthorization()
        }
    }
}
</script>

<style  lang="less" scoped></style>
